<template>
  <div class="login">
    <h1 class="t">登录</h1>
    <div class="bd">
      <div class="pic">
        <img src="../../assets/img/good.jpg">
      </div>
      <div class="operate">
        <mt-button class="b" type="primary" size="large" @click="doLogin">登录</mt-button>
        <mt-button class="btnReg" type="default" size="large" @click="doReg">注册</mt-button>
      </div>
      <div class="info">
        <mt-field label="手机号" placeholder="请输入手机号" type="tel" v-model="phone"></mt-field>
        <mt-field label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
      </div>
    </div>
  </div>
</template>

<script>
  import {Toast} from 'mint-ui'
  import {Button} from 'mint-ui'
  export default{
    name:'login',
    data(){
      return{
        phone:'',
        password:''
      }
    },
    methods:{
      doLogin(){
        Toast({
          message:  '我可以登录了',
          duration: 1500
        });
//        this.$router.push({path: '/user/home'})
      }
    }
  }
</script>

<style scoped>
  .login {
    background-color: #fff;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .t {
    font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 1 */
    display: block;
    font-weight: 300;
    font-size: 25px;
    color: #35495e;
    letter-spacing: 1px;
    align-items: center;
    text-align: center;
    margin-top: 60px;
  }
  .bd {
    background-color: #fff;
    position: absolute;
    top: 20%;
    width: 70%;
    height: 60%;
    left: 15%;
  }
  .pic {
    position: absolute;
    left: 30%;
    top: 6%;
    width: 40%;
    height: 20%;
  }
  .pic img {
    width: 100px;
    height: 100px;
    border-radius: 100px;
  }
  .info {
    position: absolute;
    top: 40%;
    height: 20%;
    width: 100%;
  }
  .operate {
    position: absolute;
    top: 70%;
    height: 20%;
    width: 100%;
  }
  .b{
    margin-top: 15px;
  }
  .btnReg{
    margin-top: 15px;
  }
</style>
